<template>
  <div class="home-panel">
    <div class="container">
      <div class="head">
        <h3>
          {{ title }}<small>{{ subTitle }}</small>
        </h3>
        <!-- 右侧内容区域 -->
        <slot name="right" />
      </div>
      <!-- 主体内容区域 -->
      <slot name="main"/>
    </div>
  </div>
</template>
<script>
/**
  思路：
    1. 不管其他事儿 先把一个基础的静态结构搭建起来
    2. 找到那些可能由于使用的地方不同 可变的地方
       主标题  副标题  右侧内容  列表主体内容
    3. 把可变的那些部分 转化成组件props或者是插槽
       props -> 数据  主标 + 副标题
       slot -> 模板(html)  右侧 + 列表主体

  组件传参的思想

    基于组件本身 说一下参数传递的事儿
    一个组件 -> 函数
    函数 可以接收参数  返回值(一个函数执行完毕之后 你可以得到什么)
    function get(num,name,cb){
    }

    组件 可以接收参数 props(数据 类型) + slot(模板 html)
         返回值？  最终呈现到浏览器中的UI

    UI = fn(state)  组件 确实就是一个函数
 */
export default {
  name: 'HomePanel',
  props: {
    // 主标题
    title: {
      type: String,
      default: ''
    },
    // 副标题
    subTitle: {
      type: String,
      default: ''
    }
  }
}
</script>
<style scoped lang='less'>
.home-panel {
  background-color: #fff;
  .head {
    padding: 40px 0;
    display: flex;
    align-items: flex-end;
    h3 {
      flex: 1;
      font-size: 32px;
      font-weight: normal;
      margin-left: 6px;
      height: 35px;
      line-height: 35px;
      small {
        font-size: 16px;
        color: #999;
        margin-left: 20px;
      }
    }
  }
}
</style>
